<template>
  <div>
    <!-- 类别查询 -->
    <div style="float: left;">
      <template>
        <el-select v-model="Goodstype.typeId" placeholder="类别查询" @change="typeFindGoods">
          <el-option v-for="item in goodsType" :key="item.typeId" :label="item.typeName" :value="item.typeId"
            :disabled="item.typeState==1">
          </el-option>
        </el-select>
      </template>
    </div>

    <!-- 添加商品按钮 -->
  <el-button type="primary" @click="dialogVisible2=true">添加商品</el-button>

    <!--    //商品展示表格-->
    <template>
      <el-table :data="goodsPage.records" border style="width: 100%">
        <el-table-column fixed prop="goodsName" label="商品名称" width="100">
        </el-table-column>
        <el-table-column prop="goodsDesc" label="商品简介" width="100">
        </el-table-column>
        <el-table-column prop="goodsScore" label="积分" width="100">
        </el-table-column>
        <el-table-column prop="goodsStorage" label="商品库存" width="100">
        </el-table-column>
        <el-table-column prop="typeName" label="类别名" width="100">
        </el-table-column>
        <el-table-column label="商品图片" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.goodsImage" width="40" height="40" />
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
         <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
        <el-table-column label="商品状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsState==0">上架</span>
            <span v-if="scope.row.goodsState==1">下架</span>
            <span v-if="scope.row.goodsState==2">删除</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.goodsState==0" @click="modifyGoodTypeState(scope.row.id,1)" type="text"
              size="small">下架</el-button>
            <el-button v-if="scope.row.goodsState==1" @click="modifyGoodTypeState(scope.row.id,0)" type="text"
              size="small">上架</el-button>
            <el-button @click="modifyGoodTypeState(scope.row.id,2)" type="text" size="small">删除</el-button>
            <el-button type="text" @click="myGoods(scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-table>
    </template>
    <!-- 分页 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="goodsPage.current" :page-sizes="[1, 2, 3, 9]" :page-size="goodsPage.size"
      layout="total, sizes, prev, pager, next, jumper" :total="goodsPage.total">
    </el-pagination>


    <!-- 修改商品文本域 -->
    <el-dialog title="修改商品" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <p style="display: inline-block;">修改商品名称：</p>
      <input type="text" style="" v-model="myGoods1.goodsName" /></br>
      <p style="display: inline-block;">修改商品简介：</p>
      <input type="text" style="" v-model="myGoods1.goodsDesc" /></br>
      <p style="display: inline-block;">修改商品积分：</p>
      <input type="text" style="" v-model="myGoods1.goodsScore" /></br>
      <p style="display: inline-block;">修改商品库存：</p>
      <input type="text" v-model="myGoods1.goodsStorage" /></br>

  <template>
    <el-select v-model="myGoods1.typeId" placeholder="修改" @change="typeFindGoods">
      <el-option v-for="item in goodsType" :key="item.typeId" :label="item.typeName" :value="item.typeId"
        :disabled="item.typeState==1">
      </el-option>
    </el-select>
  </template>

      <el-upload :headers="headers" :on-success="img" class="upload-demo"
        action="http://localhost:9099/mall/good/uploadGoodImage.admin" multiple name="photo">
        <el-button size="small" type="primary">修改商品图片</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加商品文本域 -->
    <el-dialog title="修改商品" :visible.sync="dialogVisible2" width="40%" :before-close="handleClose2">
      <p style="display: inline-block;">商品名称：</p>
      <input type="text" style="" v-model="myGoods2.goodsName" /></br>
      <p style="display: inline-block;">商品简介：</p>
      <input type="text" style="" v-model="myGoods2.goodsDesc" /></br>
      <p style="display: inline-block;">商品积分：</p>
      <input type="text" style="" v-model="myGoods2.goodsScore" /></br>
      <p style="display: inline-block;">商品库存：</p>
      <input type="text" v-model="myGoods2.goodsStorage" /></br>
          <template>
          <el-select v-model="myGoods2.typeId" placeholder="类别" >
            <el-option v-for="item in goodsType" :key="item.typeId" :label="item.typeName" :value="item.typeId"
              :disabled="item.typeState==1">
            </el-option>
          </el-select>
        </template>
      <el-upload :headers="headers" :on-success="img2" class="upload-demo"
        action="http://localhost:9099/mall/good/uploadGoodImage.admin" multiple name="photo">
        <el-button size="small" type="primary">添加商品图片</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2=flase">取 消</el-button>
        <el-button type="primary" @click="ok2">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        myGoods1: {},
        dialogVisible2:false,
        myGoods2:{},
        Goods: {
          size: "1",
          num: "3",
        },
        Goodstype: {
          size: "1",
          num: "3",
          typeId: ""
        },
        GoodsState: {
          id: "",
          state: ""
        },
        goodsPage: {},
        goodsType: {},
        headers: {
          ecologyToken: localStorage.getItem("ecologyToken")
        }
      }

    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.topage(this.goodsPage.current, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);

        this.topage(val, this.goodsPage.size)
      },
      topage(current, size) {
        this.Goods.size = current
        this.Goods.num = size
        this.$http.post("/mall/good/findGoodAll", this.Goods).then(resp => {
          this.goodsPage = resp.data.data
        })
      },
      findGoodAll() { //查看所有商品
        this.$http.post("/mall/good/findGoodAll", this.Goods)
          .then(resp => {

            this.goodsPage = resp.data.data

          })
      },
      findGoodType() { //根据种类查看所有商品

        this.$http.post("/mall/type/findGoodTypeAll")
          .then(resp => {
            this.goodsType = resp.data.data

          })
      },
      typeFindGoods() { //根据类别id查询商品
        this.$http.post("/mall/good/findGood", this.Goodstype)
          .then(resp => {
            this.goodsPage = resp.data.data

          })
      },
      modifyGoodTypeState(obj, obj1) { //修改商品状态
        this.GoodsState.id = obj
        this.GoodsState.state = obj1
        this.$http.post("/mall/good/modifyGoodState.admin", this.GoodsState)
          .then(resp => {

            this.findGoodAll()
            if(resp.data.code!=200){
              alert(resp.data.message)
            }

          })
      },
      myGoods(obj) {//打开修改商品类容
        this.myGoods1 = obj
        this.dialogVisible = true

      },
      img(response) {//修改商品类容图片上传
        this.myGoods1.goodsImage = response.data

      },
      ok(obj, obj1) { //修改商品类容确定

        this.$http.post("/mall/good/modifyGood.admin", this.myGoods1)
          .then(resp => {
            this.goodsPage = resp.data.data
            this.findGoodAll()
            this.myGoods1=""
            if(resp.data.code!=200){
              alert(resp.data.message)
            }
            this.dialogVisible = false

          })
      },
      handleClose() {//修改商品类容关闭取消函数
        this.findGoodAll()
        this.findGoodType()

        this.dialogVisible = false
      },
       img2(response) {//添加商品类容图片上传
        this.myGoods2.goodsImage = response.data
        if(resp.data.code!=200){
          alert(resp.data.message)
        }

      },
      ok2(obj, obj1) { //添加商品类容确定

        this.$http.post("/mall/good/addGood.admin", this.myGoods2)
          .then(resp => {
            this.goodsPage = resp.data.data
            this.findGoodAll()
            this.myGoods1=""
            if(resp.data.code!=200){
              alert(resp.data.message)
            }
            this.dialogVisible2 = false


          })
      },

    },
    created() {
      this.findGoodAll()
      this.findGoodType()
    }
  }
</script>

<style>

</style>
